<template>
  <div class="flex gap-5 p-4 rounded-lg transition-all duration-300 hover:bg-gray-100 bg-gray-50">
    <div class="flex-shrink-0">
      <div
        class="flex items-center justify-center w-12 h-12 rounded-lg bg-primary-50 text-primary-500"
      >
        <slot name="icon"></slot>
      </div>
    </div>
    <div class="flex-1">
      <h3 class="text-lg font-medium text-gray-800 mb-2">
        <slot name="heading"></slot>
      </h3>
      <div class="text-gray-600 text-sm leading-relaxed">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
